import React from 'react'
import {connect} from 'react-redux'

import './GiftNotice.css'
import LvMark from "../../../../../../shared-components/LvMark/LvMark";
import {GiftMapper} from "../../../../../../utils/constants";
import {log} from "../../../../../../utils/commonfunc";

const GiftNotice = props => {

    const {gift,} = props
    const {giftnum, viplevel, nickname, Name: name,} = gift
    // const name = constants.giftList[giftId].name
    // const iconList = [
    //     GiftIcon1,
    //     GiftIcon2,
    //     GiftIcon3,
    //     GiftIcon4,
    //     GiftIcon5,
    //     GiftIcon6,
    //     GiftIcon7,
    //     GiftIcon8,
    // ]
    // const iconUrl = iconList[giftId - 1]

    const iconUrl = GiftMapper[`gift_${gift.giftId}`].src

    let template = (
        <div
            className='gift-notice'
            onAnimationEnd={props.onAnimationEnd}
        >
            <div className='gift-notice-ctn'>
                <div>
                    <div className='flex-space-between-align-center' style={{marginBottom: '2px',}}>
                        {/*<span className='gift-notice-lv'>Lv{giver.Viplevel}</span>*/}
                        <LvMark lv={viplevel}/>
                        <span className='gift-notice-user-name'>{nickname}</span>
                    </div>
                    <span className='gift-notice-gift-name'>送出{name ? name : gift.name}</span>
                </div>
                <p className='gift-notice-gift-count'>x{giftnum}</p>
                <img src={iconUrl} alt='' style={{width: '100px'}}/>
            </div>
        </div>
    )


    return template
}

const mapState = (state) => ({

    userDetail: state.user.userdetail,


})

export default connect(mapState,)(GiftNotice)
